<template>
  <el-drawer v-model="showDrawer" :direction="direction">
    <template #header>
      <h4>标题</h4>
    </template>
    <template #default>
      <form-container :schema="schema" v-model="formData" :actions="formActions" :inline="false"></form-container>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="cancelClick">取消</el-button>
        <el-button type="primary" @click="confirmClick">确认</el-button>
      </div>
    </template>
  </el-drawer>
</template>
<script lang="ts" setup>
import { emit } from 'process';
import { FormButtonType, FormDataRowType } from 'types/form';
import { toRef } from 'vue';
import { ref } from 'vue';
interface DrawerFormType {
  showDrawer: boolean,
  schema?: FormDataRowType[],
  formActions: FormButtonType
}
const props = defineProps<DrawerFormType>()


const emits = defineEmits(['update:showDrawer','submit'])
let showDrawer = computed({
  get() {
    return props.showDrawer
  },
  set() {
    emits('update:showDrawer',false)
  }
})

watch(() => props.showDrawer,(n) => {
  

})

const schema = ref(props.schema)
const direction = ref('rtl')
const formData = ref()


function cancelClick() {
  emits('update:showDrawer',false)
}
function confirmClick() {
  
  emits('submit',formData)
  emits('update:showDrawer',false)
}

</script>

<style lang="scss" scoped></style>